<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label">所属小区</label>
        <div class="layui-input-block">
            <select name="cname" lay-filter="cname" id="cname" lay-search="">
            </select>
        </div>
    </div>
    <!--    <div class="layui-form-item">
            <label class="layui-form-label">栋数名称</label>
            <div class="layui-input-block">
                <select name="bname" lay-filter="bname" id="bname" lay-search="">
                </select>
            </div>
        </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label required">栋数名称</label>
        <div class="layui-input-block">
            <select name="bname" lay-filter="bname" id="bname" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label required">总户数</label>
        <div class="layui-input-block">
            <input type="text" name="unitNum" id="unitNum" lay-verify="required" lay-reqtext="总户数不能为空"
                   placeholder="请输入总户数"
                   value="" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">单元号</label>
        <div class="layui-input-block">
            <select name="unit" lay-filter="unit" id="unit" lay-search="">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">描述</label>
        <div class="layui-input-block">
            <input type="text" name="remark" id="remark" lay-verify="" lay-reqtext="描述不能为空"
                   placeholder="请输入描述" value=""
                   class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../../layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        // 接受list.html页面传递过来的parentCommunity(小区对象)，parentBuild(栋数对象)，parentOwner(业主对象)

        var childCommunity = parent.parentCommunity; // 拿到list.html的小区页面
        // console.log("来自父页面的----->" + JSON.stringify(childCommunity));
        console.log(childCommunity.cname);



        var childBname = parent.parentBname; // 拿到父页面的栋数名
        // console.log("来自父页面的----->" + JSON.stringify(childBuild));
        console.log(childBname);

        var childUnit = parent.parentUnit; // 拿到父页面的单元
        console.log(childUnit);



        var childBid = parent.parentBid; // 拿到父页面传递过来的Bid参数

        // 向后端发送请求，获取小区信息
        $.ajax({
            // url: "../../house/preAdd", // 相对路径的写法
            url: "/community_maven/community/queryAllCommunity", // 绝对路径的写法
            type: "post",
            data: "",
            dataType: "json",
            success: function (data) {
                // console.log(JSON.stringify(data))
                if (data.code === 0) {//成功
                    //遍历

                    var cnameOptionStr = "<option value='"+childCommunity.cid+"'>"+childCommunity.cname+"</option>";
                    $.each(data.data, function (index, item) {
                        if (childCommunity.cid !== item.cid){
                            cnameOptionStr += "<option value='" + item.cid + "'>" + item.cname + "</option>"
                        }
                    })


                    $("#cname").html(cnameOptionStr);

                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                } else {
                    layer.msg(data.msg);
                }
            }
        })
        // 获取栋数信息
        $.ajax({
            url: '../../build/queryAllBuidByCommu',
            type: 'post',
            data: {
                cid: childCommunity.cid,
                cname: childCommunity.cname
            },
            dataType: "json",
            success: function (data){
                // console.log(JSON.stringify(data));
                if (data.code === 0) {//成功
                    //遍历

                    var buildOptionStr = "<option value='"+childBid+"'>"+childBname+"</option>";
                    $.each(data.data, function (index, item) {
                        if (item.bid !== childBid){
                            buildOptionStr += "<option value='" + item.bid + "'>" + item.bname + "</option>"
                        }
                    })


                    $("#bname").html(buildOptionStr);

                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                } else {
                    layer.msg(data.msg);
                }
            }
        })

        // 获取单元信息
        $.ajax({
            url: '../../build/queryAllUnitByBuildAndComm',
            type: 'post',
            data: {
                cid: childCommunity.cid,
                // bid: bid,
                bname: childBname
            },
            dataType: "json",
            success: function (data){
                // console.log(JSON.stringify(data));
                if (data.code === 0) {//成功
                    //遍历

                    var unitOptionStr = "<option value='"+childBid+"'>"+childUnit+"</option>";
                    $.each(data.data, function (index, item) {
                        if (item.bid !== childBid){
                            unitOptionStr += "<option value='" + item.bid + "'>" + item.unit + "</option>"
                        }
                    })


                    $("#unit").html(unitOptionStr);

                    form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                } else {
                    layer.msg(data.msg);
                }
            }
        })


        // "所属小区"下拉框发生变化的时候，发送ajax，查询当前”小区“的”栋数“
        var cid = childCommunity.cid;
        var cname = childCommunity.cname;
        form.on('select(cname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            cid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            //获取选中的值
            var e = data.elem;
            //获取选中的文本
            cname =e[e.selectedIndex].text;
            $.ajax({
                url: '../../build/queryAllBuidByCommu',
                type: 'post',
                data: {
                    cid: cid,
                    cname: cname
                },
                dataType: "json",
                success: function (data){
                    // console.log(JSON.stringify(data));
                    if (data.code === 0) {//成功
                        //遍历

                        // var buildOptionStr = "<option value='"+childBuild.bid+"'>"+childBuild.bname+"</option>";
                        var buildOptionStr = "<option value='99'>请选择</option>";
                        $.each(data.data, function (index, item) {
                            // if (item.bid !== childBuild.bid){
                                buildOptionStr += "<option value='" + item.bid + "'>" + item.bname + "</option>"
                            // }
                        })


                        $("#bname").html(buildOptionStr);

                        form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                    } else {
                        layer.msg(data.msg);
                    }
                }
            })
        })

        // "所属栋数"下拉框发生变化的时候，发送ajax，查询当前”栋数“的所有”单元“
        // var bid = null;
        var bname = childBname;
        form.on('select(bname)', function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            let bid = data.value; // 获取cname onchange事件 发生时候的 option的value值
            console.log("bname框onchange时，bid==>" + bid);

            //获取选中的值
            // console.log(data.value)
            var e = data.elem;
            //获取选中的文本
            bname =e[e.selectedIndex].text;
            console.log("bname框onchange时，当前被选中的bname====>" + bname);
            $.ajax({
                url: '../../build/queryAllUnitByBuildAndComm',
                type: 'post',
                data: {
                    cid: cid,
                    // bid: bid,
                    bname: bname
                },
                dataType: "json",
                success: function (data){
                    // console.log(JSON.stringify(data));
                    if (data.code === 0) {//成功
                        //遍历

                        // var unitOptionStr = "<option value='"+childBuild.bid+"'>"+childBuild.unit+"</option>";
                        var unitOptionStr = "<option value='99'>请选择</option>";
                        $.each(data.data, function (index, item) {
                           // if (item.bid !== childBuild.bid){
                               unitOptionStr += "<option value='" + item.bid + "'>" + item.unit + "</option>"
                           // }
                        })


                        $("#unit").html(unitOptionStr);

                        form.render('select');//渲染整个表单 只是渲染表单中的某个组件，我们这里渲染select

                    } else {
                        layer.msg(data.msg);
                    }
                }
            })
        })



        // 通过unit的onchange事件得到变化后的bid与unit
        var bid = childBid;
        var unit = childUnit;
        form.on('select(unit)',function (data) {
            // 注意：Layui select onchange事件 正确使用教程
            // 获取参数
            bid = data.value; // 获取bid onchange事件 发生时候的 option的value值
            //获取选中的值
            console.log("unit框变化后对应的bid====>" + bid);
            var e = data.elem;
            //获取选中的文本
            unit = e[e.selectedIndex].text;
            console.log("unit框变化后对应的unit====>" + unit);
        })





        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let cid = data.field.cname; // 小区号
            // console.log("小区名===>" + cname);
            // let bid = data.field.bname; // 栋号(由于bid，bname,unit来自于同一张表，所以当unit变化了，bname可以不变，但是bid一定发生了变化，不然插入进house表的就是错误的unit)
            // console.log("栋数===>" + bname);
            // let unit = data.field.unit; // 单元
            // console.log("单元===>" + unit);
            var unitNum = data.field.unitNum; // 总户数
            // console.log("房号===>" + houseNum);
            var remark = data.field.remark;

            // 非空校验
            if (cid == '') {
                layer.msg("小区不能为空");
                return false;
            }
            if (bid == '') {
                layer.msg("栋数不能为空");
                return false;
            }
            if (bname == '') {
                layer.msg("栋数名不能为空");
                return false;
            }
            if (unitNum == '') {
                layer.msg("总户数不能为空");
                return false;
            }



            // 小区对象
            var community = {
                cid: cid,
                cname: cname,
                remark: remark
            };
            // 栋数对象
            var build = {
                bid: bid,
                bname: bname,
                unitNum: unitNum,
                // 单元(新增功能需要另外写sql)
                unit: unit,
                community: community
            };

            console.log("build===>"+JSON.stringify(build))
            $.ajax({
                type:'post',
                url:'../../build/editBuild',
                // data: house,
                data: JSON.stringify(build),
                dataType:'json',
                success(obj){
                    if(obj.code === 0){//成功
                        window.parent.location.reload();
                    }else {
                        layer.msg(obj.msg)
                    }
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                }

            })

            return false;

        });


    });
</script>


</body>
</html>